<!-- 33. 商品详情页 -->
<script setup lang="ts">
import { getGoodsByIdAPI } from '@/services/goods' // 34.4
import type { GoodsResult } from '@/types/goods.d.ts' // 34.9
import ServicePanel from './components/ServicePanel.vue' // 36.1 弹出层组件
import AddressPanel from './components/AddressPanel.vue' // 36.8 收货地址组件
import type {
  SkuPopupEvent,
  SkuPopupInstance,
  SkuPopupLocaldata,
} from '@/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup' // 60.5同步 | 61.同步 | 62.同步
// import { postMemberCartAPI } from '@/services/cart' // 62.3
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed } from 'vue'

// 33.1 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 34. 定义 props 接收数据
// 细节26: 跳转页面时, 要接收传入的 id值, 这样才不会在[控制台]输出黄色 warning 警告...
const query = defineProps<{
  id: string
}>()

// 34.5 获取商品详情
const goods = ref<GoodsResult>() // 细节28: TS 实际建议可不书写 (空对象、数组), 不然会表示没有字段, 报错
const getGoodsByIdData = async () => {
  const res = await getGoodsByIdAPI(query.id)
  goods.value = res.result // 34.end 渲染数据
  // console.log('res.result: ', res.result)

  // 60.5(处理数据) SKU组件所需格式
  localdata.value = {
    _id: res.result.id,
    name: res.result.name,
    goods_thumb: res.result.mainPictures[0],
    spec_list: res.result.specs.map((v) => {
      return {
        name: v.name,
        list: v.values,
      }
    }),
    sku_list: res.result.skus.map((v) => {
      return {
        _id: v.id,
        goods_id: res.result.id,
        goods_name: res.result.name,
        image: v.picture,
        price: v.price * 100, // 注意：需要乘以 100
        stock: v.inventory,
        sku_name_arr: v.specs.map((vv) => vv.valueName),
      }
    }),
  }
}

// 34.6 页面加载
onLoad(() => {
  getGoodsByIdData()
})

// 35.1 处理切换轮播图
const currentIndex = ref(0)
const changeSwiper: UniHelper.SwiperOnChange = (value) => {
  // console.log(value.detail.currentIndex)
  currentIndex.value = value.detail!.current
}

// 35.end 轮播图交互(预览大图)
// 细节29: 本身轮播图渲染图片时, 就是在渲染{图片路径}, 所以形参就是 {图片路径} 地址==
const onTagImage = (url: string) => {
  // console.log(url)
  uni.previewImage({
    current: url, // 为当前显示图片的链接/索引值
    urls: goods.value!.mainPictures, // 需要预览的图片链接列表(必填)
  })
}

// const isShow = ref(false) // 36.3 显示弹出层

// 36.4 uni-ui 弹出层组件 ref
const popup = ref<{
  open: (type?: UniHelper.UniPopupType) => void
  close: () => void
}>()

// 36.9 弹出层条件渲染
const popupName = ref<'address' | 'service'>()
const openPopup = (name: typeof popupName.value) => {
  // 修改弹出层名称
  popupName.value = name
  // 36.6 打开弹出层
  popup.value?.open()
}

// 60.4同步 ->是否显示SKU组件
const isShowSku = ref(false)
// 60.5 商品信息
const localdata = ref({} as SkuPopupLocaldata)

// 细节42: vscode运行 “dev:mp-weixin” 后, 实际打开的[微信开发者工具]是同步的==
// console.log('localdata: ', 123) // 能在[微信开发者工具]输出 “123” ==

// 60.7(枚举) 按钮模式(三种)
enum SkuMode {
  Both = 1, // 两个都显示
  Cart = 2, // 只显示[加入购物车]
  Buy = 3, // 只显示[点击购买]
}
const mode = ref<SkuMode>(SkuMode.Cart) // 先指定为<SkuMode>这个类型、然后再指定显示哪个“(...)”
// 60.8 打开SKU弹窗修改按钮模式
const openSkuPopup = (val: SkuMode) => {
  console.log('val: ', val)

  // 显示SKU弹窗
  isShowSku.value = true
  // 60.9 修改按钮模式
  mode.value = val
}

// 61. 定义 “SKU” 弹窗的组件实例
const skuPopupRef = ref<SkuPopupInstance>()
// 61.1 计算选中的值
const selectArrText = computed(() => {
  // 61.2 根据组件实例中的 selectArr(被选中的值), 获取到 “被选中的值”, 进行渲染
  // selectArr 初始为空数组, 需转为字符串, 才能正常渲染到页面...
  // 61.3 处理, 未选中为空字符串时, 页面显示 空白内容 的情况 --- trim()
  return skuPopupRef.value?.selectArr?.join(' ').trim() || '请选择商品规格'

  // 61.end 组件上使用 “actived-style” 属性, 更改组件按钮选中的主题色...
})

// // 62. SKU-加入购物车
// const onAddCart = (ev: SkuPopupEvent) => {
//   console.log('ev: ', ev)
// }
</script>

<template>
  <!-- 60.4 使用 “SKU插件” 中的弹窗组件 -->
  <vk-data-goods-sku-popup v-model="isShowSku" :mode="mode" :localdata="localdata" />

  <!-- 62.3 此时, 已不能正常使用<弹窗>组件了(版本问题, 处理不了), 因此需基于 “源码” 去进行后续练习... -->
  <!-- <vk-data-goods-sku-popup
    v-model="isShowSku"
    :localdata="localdata"
    :mode="mode"
    add-cart-background-color="#FFA868"
    buy-now-background-color="#27BA9B"
    ref="skuPopupRef"
    :actived-style="{
      color: '#27BA9B',
      borderColor: '#27BA9B',
      backgroundColor: '#E9F8F5',
    }"
    @add-cart="onAddCart"
  /> -->
  <scroll-view scroll-y class="viewport">
    <!-- 33.2 基本信息 -->
    <view class="goods">
      <!-- 33.3 商品主图 -->
      <view class="preview">
        <swiper circular @change="changeSwiper">
          <swiper-item v-for="item in goods?.mainPictures" :key="item">
            <!-- 35.3 点击[轮播图]图片进行放大预览: -->
            <image @tap="onTagImage(item)" class="image" mode="aspectFill" :src="item" />
          </swiper-item>
        </swiper>
        <view class="indicator">
          <text class="currentIndex">{{ currentIndex + 1 }}</text>
          <text class="split">/</text>
          <text class="total">{{ goods?.mainPictures.length }}</text>
        </view>
      </view>

      <!-- 33.4 商品简介 -->
      <view class="meta">
        <view class="price">
          <text class="symbol">¥</text>
          <text class="number">{{ goods?.price }}</text>
        </view>
        <view class="name ellipsis">{{ goods?.name }}</view>
        <view class="desc"> {{ goods?.desc }} </view>
      </view>

      <!-- 33.5 操作面板 -->
      <view class="action">
        <!-- 60.6 点击[请选择商品规格]显示弹窗 -->
        <!-- 60.9同步 ->显示两个按钮 -->
        <!-- openSkuPopup(SkuMode.Both) -->
        <view @tap="openSkuPopup(SkuMode.Both)" class="item arrow">
          <text class="label">选择</text>
          <!-- {{ selectArrText }} -->
          <text class="text ellipsis"> 请选择收货地址 </text>
        </view>
        <!-- 36.end 显示-收货地址弹出层 -->
        <view @tap="openPopup('address')" class="item arrow">
          <text class="label">送至</text>
          <text class="text ellipsis"> 请选择收货地址 </text>
        </view>
        <!-- 36.5 显示-服务弹出层 -->
        <view @tap="openPopup('service')" class="item arrow">
          <text class="label">服务</text>
          <text class="text ellipsis"> 无忧退 快速退款 免费包邮 </text>
        </view>

        <!-- 36.2 弹出层组件 -->
        <!-- uni-ui 弹出层 -->
        <uni-popup ref="popup" type="bottom" background-color="#fff">
          <!-- 37.end 收货地址原理一样 -->
          <AddressPanel v-if="popupName === 'address'" @close="popup?.close()" />
          <!-- 37.2 再由(父)触发 "自定义emit事件" -->
          <ServicePanel v-if="popupName === 'service'" @close="popup?.close()" />
        </uni-popup>
      </view>
    </view>

    <!-- 33.6 商品详情 -->
    <view class="detail panel">
      <view class="title">
        <text>详情</text>
      </view>
      <view class="content">
        <view class="properties">
          <!-- 33.6.1 属性详情 -->
          <view class="item" v-for="item in goods?.details.properties" :key="item.name">
            <text class="label">{{ item.name }}</text>
            <text class="value">{{ item.value }}</text>
          </view>
        </view>
        <!-- 33.6.2 图片详情 -->
        <image
          class="image"
          v-for="pic in goods?.details.pictures"
          :key="pic"
          mode="widthFix"
          :src="pic"
        ></image>
      </view>
    </view>

    <!-- 33.7 同类推荐 -->
    <view class="similar panel">
      <view class="title">
        <text>同类推荐</text>
      </view>
      <view class="content">
        <navigator
          v-for="item in goods?.similarProducts"
          :key="item.id"
          class="goods"
          hover-class="none"
          :url="`/pages/goods/goods?id=${item.id}`"
        >
          <image class="image" mode="aspectFill" :src="item.picture"></image>
          <view class="name ellipsis">{{ item.name }}</view>
          <view class="price">
            <text class="symbol">¥</text>
            <text class="number">{{ item.price }}</text>
          </view>
        </navigator>
      </view>
    </view>
  </scroll-view>

  <!-- 33.8 用户操作 -->
  <view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
    <view class="icons">
      <button class="icons-button"><text class="icon-heart"></text>收藏</button>
      <button class="icons-button" open-type="contact">
        <text class="icon-handset"></text>客服
      </button>
      <navigator class="icons-button" url="/pages/cart/cart" open-type="switchTab">
        <text class="icon-cart"></text>购物车
      </navigator>
    </view>
    <view class="buttons">
      <!-- 60.9同步 ->显示一个按钮 -->
      <view @tap="openSkuPopup(SkuMode.Cart)" class="addcart"> 加入购物车 </view>
      <view @tap="openSkuPopup(SkuMode.Buy)" class="payment"> 立即购买 </view>
    </view>
  </view>
</template>

<style lang="scss">
/* 33.end 引入外部封装的样式集 */
@import './styles/goods.scss';
</style>
